/*
* @Author: zhangsai
* @Date: 2018/2/7
* @Last Modified by: zhangsai
* @Last Modified time: 2018/2/7
* @description: 个人中心
*/

<template>
    <div>
        <el-form label-width="120px" class="ca-m-t-15" v-if="isChangePassword">
            <el-row style="width: 730px;margin: 0 auto">
                <el-col :span="12">
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="原密码">
                                <el-input type="password" v-model="oldPassword" placeholder="请输入原密码"></el-input>
                                <span style="color:#ff0000" v-show="checkOldPassword">{{checkOldPassword}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="设置新密码">
                                <el-input type="password" v-model="newPassword" placeholder="请输入新密码"></el-input>
                                <span style="color:#ff0000" v-show="checkNewPassword">{{checkNewPassword}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="确认新密码">
                                <el-input type="password" v-model="reNewPassword" placeholder="请再次输入新密码"></el-input>
                                <span style="color:#ff0000" v-show="checkReNewPassword">{{checkReNewPassword}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="12" class="ca-password__tips">
                    密码设置Tips：<br />
                    1.密码不得小于<span style="color: #ff0000">8个字符</span>；<br />
                    2.密码必须使用<span style="color: #ff0000">字母+数字</span>组合构成；<br />
                    3.请定期更换密码，可以有效降低账号被盗风险；
                    </el-col>
            </el-row>
            <div class="ca-align-center ca-m-t-10 ca-m-b-10">
                <el-button type="primary" class="ca-btn__confirm" @click="checkPassword">确 认</el-button>
                <el-button type="default" class="ca-btn__cancel" @click="formatPassword">取 消</el-button>
            </div>
        </el-form>
    </div>
</template>

<script type="text/ecmascript-6">
    import { api } from '../api';
    import { STATUS_HTTP_SUCCESS, apiHttp } from '__service/csHttp';
    export default {
        data() {
            return {
                oldPassword: '',  //原密码
                newPassword: '',  //新密码
                reNewPassword: '', //确认新密码
                checkOldPassword: '', //输入原密码不正确或者为空
                checkNewPassword: '', //检查输入的新密码是否为空或者不符合要求
                checkReNewPassword: '', //检查第二次密码的输入
            }
        },
        watch: {},
        props: {
            // 是否显示修改密码的弹窗
            isChangePassword: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            //格式化账号安全模块
            formatPassword() {
                this.isClosePassword();
                this.oldPassword = '';
                this.newPassword = '';
                this.reNewPassword = '';
            },
            //检查输入的原始密码是否正确
            checkPassword() {
                if (!this.oldPassword) {
                    this.checkOldPassword = '请输入当前密码';
                } else {
                    this.updatePassword();
//                    let checkPasswordParam = {
//                        token: this.$store.state.user.token,
//                        password: this.oldPassword
//                    };
//                    csHttp(interFace.gPersonal.checkPasswrd,checkPasswordParam).then(ret=> {
//                            if (ret.data.flag == 1) {
//                                this.checkOldPassword = "";
//                                this.updatePassword();
//                            } else {
//                                this.checkOldPassword = "当前密码错误";
//                            }
//                        }
//                    );
                }
            },
            // 保存提交新密码
            async updatePassword() {
                if (!this.newPassword) {
                    this.checkNewPassword = '请输入新的密码';
                    return;
                }
                if (this.newPassword.length < 8) {
                    this.checkNewPassword = '密码不得小于8个字符';
                    return;
                }
                if (/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{8,}$/.test(this.newPassword) === false) {
                    this.checkNewPassword = '密码必须使用字母加数字组合';
                    return;
                }
                if (/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{8,}$/.test(this.newPassword) && this.newPassword.length >= 8) {
                    this.checkNewPassword = '';
                }
                if (this.reNewPassword !== this.newPassword) {
                    this.checkReNewPassword = '两次输入的密码不一致';
                    return;
                }
                if (this.reNewPassword === this.newPassword) {
                    this.checkReNewPassword = '';
                }
                if (/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{8,}$/.test(this.newPassword) && this.newPassword.length >= 8 && this.reNewPassword === this.newPassword) {
                    let params = {
                        oldPassWord: this.oldPassword,
                        newPassWord: this.newPassword,
                        userName: this.$store.state.user.email
                    };
                    let resData = await apiHttp(api.SET_PASSWORD, params);
                    if (resData.resCode === STATUS_HTTP_SUCCESS) {
                            this.$message({
                                message: '密码修改成功！',
                                type: 'success'
                            });
                            this.isClosePassword();
                            this.oldPassword = '';
                            this.newPassword = '';
                            this.reNewPassword = '';
                    }
                }
            },
            // 关闭弹出框
            isClosePassword() {
                this.$emit('isClosePassword');
                this.checkOldPassword = '';
            },
        },
        components: {}
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .ca-password__tips {
        font-size: 12px;
        color: #999;
        margin-top: 40px;
        line-height: 20px;
    }
</style>
